<template>
  <el-dialog
    :destroy-on-close="false"
    :show-close="false"
    v-model="dialogVisible"
    align-center
    width="674"
  >
    <div class="i-iover">
      <img class="close" @click="close" src="~/assets/img/close.png" alt="" />
      <div class="header">
        <span class="name">完善信息</span>
        <span class="sub-name">便于为你提供更精准的服务和圈子</span>
      </div>
      <div class="tip"><span>首次填写免费赠送100NB</span></div>
      <div class="content">
        <div class="group">
          <div class="label">您的身份</div>
          <div class="btns">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="老板" />
              <el-checkbox label="经营" />
              <el-checkbox label="推广" />
              <el-checkbox label="美工" />
              <el-checkbox label="客服" />
              <el-checkbox label="大学生兼职" />
            </el-checkbox-group>
          </div>
        </div>
        <div class="group">
          <div class="label">您的身份</div>
          <div class="btns">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="老板" />
              <el-checkbox label="经营" />
              <el-checkbox label="推广" />
              <el-checkbox label="美工" />
              <el-checkbox label="客服" />
              <el-checkbox label="大学生兼职" />
            </el-checkbox-group>
          </div>
        </div>
        <div class="group">
          <div class="label">您的身份</div>
          <div class="btns">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="老板" />
              <el-checkbox label="经营" />
              <el-checkbox label="推广" />
              <el-checkbox label="美工" />
              <el-checkbox label="客服" />
              <el-checkbox label="大学生兼职" />
            </el-checkbox-group>
          </div>
        </div>
        <div class="group">
          <div class="label">您的身份</div>
          <div class="btns">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="老板" />
              <el-checkbox label="经营" />
              <el-checkbox label="推广" />
              <el-checkbox label="美工" />
              <el-checkbox label="客服" />
              <el-checkbox label="大学生兼职" />
            </el-checkbox-group>
          </div>
        </div>
          <div class="group">
          <div class="label">您的身份</div>
          <div class="btns">
            <el-checkbox-group v-model="checkList">
              <el-checkbox label="老板" />
              <el-checkbox label="经营" />
              <el-checkbox label="推广" />
              <el-checkbox label="美工" />
              <el-checkbox label="客服" />
              <el-checkbox label="大学生兼职" />
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button class="cancel" @click="dialogVisible = false"
          >取消</el-button
        >
        <el-button class="confirm" @click="dialogVisible = false"
          >确认提交</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
const dialogVisible = ref(false);
const checkList = ref([]);
const close = () => {
  dialogVisible.value = false;
};
const show = () => {
  dialogVisible.value = true;
};
defineExpose({
  close,
  show,
});
</script>

<style lang="scss" scoped>
.i-iover {
  height: 556px;
  background: #ffffff;
  border-radius: 10px;
  position: relative;
  .close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
  }
  .header {
    height: 68px;
    background: #ffffff;
    display: flex;
    align-items: center;
    .name {
      font-size: 20px;
      font-weight: 400;
      text-align: LEFT;
      color: #333333;
      margin: 0 10px 0 20px;
    }
    .sub-name {
      font-size: 13px;
      font-weight: 400;
      color: #725d52;
    }
  }
  .tip {
    height: 34px;
    background: #F0FBF9;
    display: flex;
    align-items: center;
    > span {
      font-size: 13px;
      font-weight: 500;
      text-align: LEFT;
      color: #32C7AA;
      margin-left: 20px;
    }
  }
  .content {
    margin: 30px 20px;
    .group {
      margin-bottom: 20px;
      .name {
        font-size: 16px;
        font-weight: 500;
        text-align: LEFT;
        color: #999999;
        magin-bottom: 10px;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    margin-right: 20px;
    ::v-deep .el-button.cancel {
      width: 170px;
      height: 40px;
      background: #D8E7E4;
      border-radius: 5px;
      color: #32C7AA;
      font-size: 16px;
    }
    ::v-deep .el-button.confirm {
      width: 170px;
      height: 40px;
      background: #32C7AA;
      border-radius: 5px;
      color: #fff;
      font-size: 16px;
    }
  }
}
</style>
